<template>
  <!-- 如果把添加和修改的功能，封装成了独立的子组件，那么，以下5点需要遵守： -->
  <!-- 1. 一定要把 el-dialog 的 :visible.sync 中的 .sync 修饰符去掉 -->
  <!-- 2. :visible 的值，一定要通过 props 来接收，不要把它定义成 data 中的数据 -->
  <!-- 3. 如果想要关闭对话框，那么要绑定三个事件： -->
  <!-- 3.1 el-dialog 的 @close 事件 -->
  <!-- 3.2 取消按钮的 @click 事件 -->
  <!-- 3.3 确定按钮的 @click 事件 -->
  <!-- 4. 在关闭对话框的时候，要利用 this.$emit('update:xxx', false) 这种方式进行子传父 -->
  <!-- 5. 需要在父组件中，添加 .sync 的修饰符 -->
  <el-dialog title="添加子部门" :visible="showDialog" width="50%" @close="onClose" @closed="resetForm">
    <!-- 添加的表单 -->
    <el-form ref="formRef" label-width="85px" :model="form" :rules="formRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" placeholder="请输入部门编码" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width: 100%" placeholder="请选择部门负责人">
          <!-- 循环创建可选项 -->
          <el-option v-for="item in empList" :key="item.id" :label="item.username" :value="item.username"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" :rows="3" placeholder="请填写部门介绍" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onCancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 按需导入接口
import { getEmpSimpleListAPI } from '@/api/emp.js'
import { getDepartListAPI, addDepartAPI } from '@/api/depart.js'

export default {
  name: 'AddDepart',
  // 父组件传递过来的数据
  // Vue 规定，props 接收到的值，应该是只读的，不允许被修改
  props: {
    // 是否展示添加的对话框
    showDialog: {
      type: Boolean,
      default: false
    },
    // 父级部门的 id 值
    pid: {
      type: String,
      default: ''
    }
  },
  data() {
    // 验证当前的部门名称，是否被占用
    const checkDepartName = (rule, value, cb) => {
      // 形参中的 value 是用户填写的部门名称
      const boo = this.departList.filter((item) => item.name !== null).some((item) => item.name.toUpperCase() === value.toUpperCase())
      boo ? cb(new Error(`"${value}"部门名称已存在！`)) : cb()
    }

    // 验证兄弟部门是否有存在相同的编码
    const checkCode = (rule, value, cb) => {
      console.log(value)
      // 形参中的 value 就是当前填写的部门编码
      const boo = this.departList.filter((item) => item.pid === this.pid && item.code !== null).some((item) => item.code.toUpperCase() === value.toUpperCase())
      boo ? cb(new Error(`部门编码"${value}"已被使用，请更换其它编码！`)) : cb()
    }

    return {
      // 数据对象
      form: {
        // 部门编码
        code: '',
        // 介绍
        introduce: '',
        // 负责人
        manager: '',
        // 部门名称
        name: '',
        // 父部门的 id
        pid: ''
      },
      // 验证规则对象
      formRules: {
        // 部门编码
        code: [
          // 必填项
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          // 自定义的校验规则
          { validator: checkCode, trigger: 'blur' }
        ],
        // 介绍
        introduce: [
          // 必填项
          { required: true, message: '部门介绍不能为空', trigger: 'blur' }
        ],
        // 负责人
        manager: [
          // 必填项
          { required: true, message: '部门负责人不能为空', trigger: 'change' }
        ],
        // 部门名称
        name: [
          // 必填项
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          // 自定义校验规则
          { validator: checkDepartName, trigger: 'blur' }
        ]
      },
      // 员工的列表数据
      empList: [],
      // 所有的部门列表数据
      departList: []
    }
  },
  created() {
    // 获取员工的列表数据
    this.initEmpList()
    this.initDepartList()
  },
  methods: {
    // 点击 x 号，要关闭对话框
    onClose() {
      this.$emit('update:showDialog', false)
    },
    // 点击了取消按钮，想要把父组件的 isShowAdd 改成 false
    onCancel() {
      // this.$emit('update:属性的名字', false)
      this.$emit('update:showDialog', false)
    },
    // 点击了确定按钮，想要把父组件的 isShowAdd 改成 false
    onConfirm() {
      // 1. 对表单数据进行校验
      // 2. 调用接口，添加部门
      // 3. 成功之后的3件事儿
      // 3.1 提示用户成功了
      // 3.2 刷新列表数据
      // 3.3 关闭对话框
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return
        // 封装并调用添加部门的接口
        await addDepartAPI({ ...this.form, pid: this.pid })
        // 提示用户成功了
        this.$message.success('添加子部门成功！')
        // 刷新列表数据
        this.$emit('reload')
        // 关闭对话框
        this.$emit('update:showDialog', false)
      })
    },
    // 获取员工的列表数据
    async initEmpList() {
      const result = await getEmpSimpleListAPI()
      this.empList = result.data
    },
    // 在对话框关闭完成后，重置表单的数据和验证的结果
    resetForm() {
      this.$refs.formRef.resetFields()
      // 把父组件中的 pid 值，重置为空字符串
      this.$emit('update:pid', '')
    },
    // 初始化部门的列表数据
    async initDepartList() {
      const result = await getDepartListAPI()
      this.departList = result.data.depts
    }
  }
}
</script>

<style lang="scss" scoped></style>
